<?php

use yii\helpers\Url;
use yii\bootstrap\Alert;
use yii\grid\GridView;
use yii\widgets\LinkPager;
use yii\widgets\ActiveForm;

$this->title = '图片列表';
?>

<div class="RightCenter clear">

    <div class="RightTime">
        <div class="Time">
            <h3>图片库</h3>
        </div>
    </div>

    <div class="Right_common">

        <div class="max_one" style="width:300px;">
            <h5>图片操作</h5>
            <?php $form = ActiveForm::begin(['action'=>'/server/upload-images','enableAjaxValidation' => false,'options' => ['enctype' => 'multipart/form-data']]) ?>
                <?= $form->field($model, 'file[]')->fileInput(['multiple' => true,'style'=>'margin:0 auto']) ?>
                <div style="display: inline-block;">
                    <button class="btn btn-success">批量添加</button>
                    <button type="button" class="btn btn-success button_del">批量删除</button>
                </div>
            <?php ActiveForm::end() ?>
        </div>
        
    </div>

    <div class="Read_date">
        <ul>
            <li class="Read_LisJ">
                <div class="img_SX clear">筛选:
                    <select>
                        <option>全部频道</option>
                        <option>男频</option>
                        <option>女频</option>
                    </select>
                    <button type="button" class="btn btn-primary czS">重置</button>
                </div>
            </li>
        </ul>
    </div>
    <?php
    if (Yii::$app->getSession()->hasFlash('success')) {
        echo Alert::widget([
            'options' => [
                'class' => 'alert-success', //这里是提示框的class
                'style' => 'width:96%;margin:0 auto;',
            ],
            'body' => Yii::$app->getSession()->getFlash('success'), //消息体
        ]);
    }
    if (Yii::$app->getSession()->hasFlash('error')) {
        echo Alert::widget([
            'options' => [
                'class' => 'alert-error',
                'style' => 'width:96%;margin:0 auto;',
            ],
            'body' => Yii::$app->getSession()->getFlash('error'),
        ]);
    }
    ?>
    <ul class="tw_IMG">
        <?php foreach($data as $v):?>
            <li data-id="<?php echo $v['id'];?>"><img src='<?php echo $v['img_url'];?>'></li>
        <?php endforeach;?>
    </ul>
    <!--分页			-->
    <div class="Maple">
        <div class="DIV">
            <div id="callBackPager" class="FY"></div>
            <div>
                <li>总共 <span> <?php echo $total;?> </span> 条</li>
<!--                <li>每页显示
                    <select class="SElect">
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </li>-->
            </div>
        </div>
    </div>

</div>


<div class="button_delTow">
    <h4>提示</h4>
    <p class="modal_onep">确定删除选中图片？删除后不可逆</p>
    <button class="modal_bots">删除</button>
    <button class="modal_botq">取消</button>
</div>

<div class="bonbeijing"></div>
<script>
    $(function(){
        $(".pagination>li").removeClass("active")
        $(".pagination>li").eq(<?php echo $params['page']+1;?>).addClass("active")
    })

    $('.tw_IMG>li').click(function () {
        $(this).toggleClass('selected');
        if ($('li.selected').length == 0)
            $('.select').removeClass('selected');
        else
            $('.select').addClass('selected');
        counter();
    });

// all item selection
    $('.select').click(function () {
        if ($('li.selected').length == 0) {
            $('li').addClass('selected');
            $('.select').addClass('selected');
        } else {
            $('li').removeClass('selected');
            $('.select').removeClass('selected');
        }
        counter();
    });


// number of selected items
    function counter() {
        if ($('.tw_IMG>li.selected').length > 0)
            $('.send').addClass('selected');
        else
            $('.send').removeClass('selected');
        $('.send').attr('data-counter', $('li.selected').length);
    }



    /*添加图片操作*/

    $(".button_add").click(function () {
        $('.but_file').click()
    })

    $(".button_del").click(function () {
        $(".button_delTow").show()
        $(".bonbeijing").show()
        $("body").css("overflow", "hidden")
    })
    
    $(".modal_bots").click(function(){
        var arr = []
        for(var i = 0;i<$(".tw_IMG>li").length;i++){
            if($(".tw_IMG>li").eq(i).hasClass("selected")){
                arr.push($(".tw_IMG>li").eq(i).attr("data-id"))
            }
        }
        if(arr.length == 0){
            alert('请先选择图片');
            return false;
        }
        $.post("/tweet/del-images",{ids:arr.join(',')},function(result){
            alert(result)
            location.reload()
        });
    })


    $(".modal_botq").click(function () {
        $(".button_delTow").hide()
        $(".bonbeijing").hide()
        $("body").css("overflow", "auto")
    })




    /*	分页*/
    function callBackPagination() {
        var totalCount = '<?php echo $total;?>';
        var showCount = totalCount;
        var limit = 10; //显示条数
        createTable(1, limit, totalCount);
        $('#callBackPager').extendPagination({
            totalCount: totalCount,
            showCount: showCount,
            limit: limit,
            callback: function (curr, limit, totalCount) {
                createTable(curr, limit, totalCount);
            }
        });
    }
    
    callBackPagination()
    $(".pagination>li").click(function() {
        var P = $(".active").text()
        location.href="/tweet/images?page="+P
    })

    function createTable(currPage, limit, total) {

    }
</script>
<script>


//    setTimeout(function () {
//        $("#w0").find("button").click();
//    }, 3000);

</script>